<template>
    <div ref="chartRef" class="trend-chart" />
</template>
<script setup>
import * as echarts from 'echarts'
import { nextTick, onMounted, computed, ref, watch } from 'vue'

const props = defineProps({
    data: {
        type: Object,
        default: () => { }
    },
    color: {
        type: String,
        default: '#67c23a'
    }
})

const chartRef = ref()
const chartInstance = ref()

const chartData = ref([
    // { name: '轻微', value: '100' },
])


watch(() => props.data, (newVal) => {
    // console.log('props', props.data, props.color);
    nextTick(() => {
        // rectified
        // console.log('newVal', newVal);
        
        const data = [{ name: newVal.level, value: newVal.total, total: newVal.total }]
        chartData.value = data
        // console.log('chartData', chartData.value);
        initData()
    })
}, { deep: true, immediate: true })

const lightenColor = (hex, percent) => {
    // 移除#号
    let color = hex.replace(/^#/, '');

    // 解析RGB值
    let r = parseInt(color.substring(0, 2), 16);
    let g = parseInt(color.substring(2, 4), 16);
    let b = parseInt(color.substring(4, 6), 16);

    // 增加亮度
    r = Math.min(255, r + r * percent / 100);
    g = Math.min(255, g + g * percent / 100);
    b = Math.min(255, b + b * percent / 100);

    // 转回16进制
    return `#${Math.round(r).toString(16).padStart(2, '0')}${Math.round(g).toString(16).padStart(2, '0')}${Math.round(b).toString(16).padStart(2, '0')}`;
};
const gradient = computed(() => {
    return new echarts.graphic.LinearGradient(0, 0, 1, 0, [
        { offset: 0, color: props.color },
        { offset: 0.17, color: lightenColor(props.color, 30) },
        { offset: 0.9, color: lightenColor(props.color, 50) },
        { offset: 1, color: lightenColor(props.color, 70) }
    ]);
})

const initData = () => {
    const data = {
        series: [
            {
                name: "gauge",
                type: 'gauge',
                radius: '92%',
                startAngle: '225',
                endAngle: '-45',
                pointer: { show: false },
                detail: {
                    formatter: function (value) {
                        var num = Number(value || 0)
                        // console.log(value);
                        return '{bule|' + num + '}';
                    },
                    rich: {
                        bule: {
                            fontSize: 26,
                            color: '#fff',
                            fontWeight: '700',
                            padding: [0, 0, 0, 0],
                        },
                    },
                    "offsetCenter": ['0%', "0%"],
                },
                data: chartData.value,
                title: {
                    show: true,
                    offsetCenter: ['0%', '75%'],
                    borderWidth: 1,
                    // borderColor: '#0092F2',
                    borderColor: props.color,
                    fontSize: 16,
                    color: '#fff',
                    backgroundColor: '#1B215B',
                    borderRadius: 5,
                    textAlign: 'center',
                    padding: [8, 10, 2, 10],
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: [[0.91, gradient.value], [1, '#15337C']], // 0.91位置使用渐变
                        width: 10,
                        shadowOffsetX: 0,
                        shadowOffsetY: 0,
                    }
                },
                axisTick: { show: false },
                splitLine: { show: false },
                axisLabel: { show: false },
            },
            {
                type: 'gauge',
                name: '外层辅助',
                radius: '98%',
                startAngle: '225',
                endAngle: '-45',
                splitNumber: '100',
                pointer: { show: false },
                detail: { show: false },
                data: [{ value: 100 }],
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: [[1, props.color]],
                        width: 1,
                    }
                },
                axisTick: { show: false },
                splitLine: {
                    show: true,
                    length: 20,
                    lineStyle: {
                        color: '#051932',
                        width: 0,
                        type: 'solid',
                    },
                },
                axisLabel: { show: false }
            },
            {
                name: '灰色内圈', //刻度背景
                type: 'gauge',
                z: 2,
                radius: '73%',
                startAngle: '225',
                endAngle: '-45',
                //center: ["50%", "75%"], //整体的位置设置
                axisLine: {
                    lineStyle: {
                        color: [
                            [1, props.color]
                        ],
                        width: 1,
                    }
                },
                splitLine: { show: false },
                axisLabel: { show: false },
                pointer: { show: false },
                axisTick: { show: false },
                detail: { show: 0 }
            },
            {
                name: "白色圈刻度",
                type: "gauge",
                radius: "90%",
                startAngle: 225, //刻度起始
                endAngle: -45, //刻度结束
                z: 4,
                axisTick: { show: false },
                splitLine: {
                    length: 6, //刻度节点线长度
                    lineStyle: {
                        width: 1,
                        color: props.color
                    }
                },
                axisLabel: {
                    color: 'rgba(255,255,255,0)',
                    fontSize: 12,
                },
                pointer: { show: false },
                axisLine: {
                    lineStyle: {
                        opacity: 0
                    }
                },
                detail: { show: false },
            },

        ]
    };
    data && chartInstance.value.setOption(data)
    // chartInstance.value.on('click', function (params) {
    //     console.log('111', params);
    // });
}
onMounted(() => {
    chartInstance.value = echarts.init(chartRef.value)
    initData()

})

</script>

<style scoped lang="scss">
.trend-chart {
    width: 100%;
    height: 100%;
}
</style>